<template>
    <a-form :model="form" layout="horizontal" style="max-width: 800px; margin: 0 auto;">
      <!-- 客户基本信息 -->
      <a-row :gutter="16" justify="space-between">
        <a-col :span="24">
          <a-form-item label="客户简称">
            <a-input v-model:value="form.customerShortName" placeholder="请输入客户简称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="客户类型">
            <a-select v-model:value="form.customerType" placeholder="请选择">
              <a-select-option value="非代账客户">非代账客户</a-select-option>
              <!-- 可扩展其他类型 -->
            </a-select>
          </a-form-item>

        </a-col>
        <a-col :span="12">
          <a-form-item label="代账服务状态">
            <a-select v-model:value="form.accountServiceStatus" placeholder="请选择">
              <a-select-option value="服务中">服务中</a-select-option>
              <!-- 可扩展其他状态 -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="片区">
            <a-select v-model:value="form.area" placeholder="请选择">
              <!-- 实际可通过接口动态加载选项 -->
              <a-select-option value="选项1">选项1</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="客户等级">
            <a-select v-model:value="form.customerLevel" placeholder="请选择">
              <a-select-option value="选项1">选项1</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="来源">
            <a-select v-model:value="form.source" placeholder="请选择">
              <a-select-option value="选项1">选项1</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="客户标签">
            <a-input v-model:value="form.customerTag" placeholder="请输入客户标签" />
          </a-form-item>
        </a-col>
      </a-row>
    <CommonTitle title="企业信息" />

<a-row :gutter="16">

  <a-col :span="12">
      <a-form-item label="企业全称">
        <a-input v-model:value="form.enterpriseFullName" placeholder="请输入企业全称" />
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item label="所属部门">
        <a-select v-model:value="form.department" placeholder="请选择">
          <a-select-option value="佛山友科财税服务有限公司">佛山友科财税服务有限公司</a-select-option>
        </a-select>
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item label="企业税号">
        <a-input v-model:value="form.taxNumber" placeholder="请输入企业税号" />
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item label="客户编号">
        <a-input v-model:value="form.customerNo" placeholder="请输入客户编号" />
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item label="增值税">
        <a-select v-model:value="form.vatType" placeholder="请选择">
          <a-select-option value="小规模纳税人">小规模纳税人</a-select-option>
        </a-select>
      </a-form-item>
    </a-col>
    <a-col :span="12">
      <a-form-item label="行业分类">
        <a-select v-model:value="form.industryCategory" placeholder="请选择">
          <a-select-option value="租赁和商务服务业-商务服务业">租赁和商务服务业-商务服务业</a-select-option>
        </a-select>
      </a-form-item>
    </a-col>
    <a-col :span="24">
      <a-form-item label="所在地区">
        <a-cascader v-model:value="form.region" :options="regionOptions" placeholder="请选择省/市/区" />
      </a-form-item>
    </a-col>
    <a-col :span="24">
      <a-form-item label="详细地址">
        <a-input v-model:value="form.detailAddress" placeholder="请输入详细地址" />
      </a-form-item>
    </a-col>
</a-row>

      <CommonTitle title="服务人员" />
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="客户经理">
            <a-select v-model:value="form.customerManager" placeholder="请选择">
              <a-select-option value="阿静">阿静</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="服务顾问">
            <a-select v-model:value="form.serviceAdvisor" placeholder="请选择">
              <a-select-option value="杨亚丽">杨亚丽</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="账务会计">
            <a-select v-model:value="form.accountant" placeholder="请选择">
              <a-select-option value="阿静">阿静</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="税务会计">
            <a-select v-model:value="form.taxAccountant" placeholder="请选择">
              <a-select-option value="阿静">阿静</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收费负责人">
            <a-select v-model:value="form.chargePerson" placeholder="请选择" mode="multiple">
              <a-select-option value="罗会计">罗会计</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="开票员">
            <a-select v-model:value="form.invoicePerson" placeholder="请选择" mode="multiple">
              <a-select-option value="罗会计">罗会计</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="审核会计">
            <a-select v-model:value="form.auditAccountant" placeholder="请选择" mode="multiple">
              <a-select-option value="叶会计">叶会计</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="其他服务人员">
            <a-select v-model:value="form.otherServicePerson" placeholder="请选择" mode="multiple">
              <a-select-option value="冯祖云">冯祖云</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 服务人员 -->

    </a-form>


</template>

<script setup>
import { message } from 'ant-design-vue';
import _, { fromPairs } from 'lodash';
import { nextTick, reactive, ref } from 'vue';
import { asApi } from '/@/api/addrstandard/as-api'
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
import DictSelectType from '/@/components/cache/dict-select-type.vue'
import { SERVICE_ID_ENUM, DICT_TYPE_ENUM } from '/@/constants/system/cache-service-id-const';

defineExpose({
  // showModal,
});
const emit = defineEmits('refresh');

// --------------------- modal 显示与隐藏 ---------------------
// 是否展示
const dictValueList = ref([]);




async function loadSelect() {
  let res = await asApi.findTodoTask(form);
  if (res.success)
    dictValueList.value = res.data;
}

// --------------------- 表单 ---------------------
// 省市区级联数据，实际可通过接口获取，这里简单模拟
const regionOptions = [
  {
    value: '广东省',
    label: '广东省',
    children: [
      {
        value: '佛山市',
        label: '佛山市',
        children: [
          {
            value: '高明区',
            label: '高明区'
          }
        ]
      }
    ]
  }
];

// 表单数据


//  组件
const formRef = ref();

const formDefault = {
  customerShortName: '佛山友科财税服务有限公司',
  customerType: '非代账客户',
  accountServiceStatus: '服务中',
  area: '',
  customerLevel: '',
  source: '',
  customerTag: '',
  enterpriseFullName: '佛山友科财税服务有限公司',
  department: '佛山友科财税服务有限公司',
  taxNumber: '914406050MA54UC6A69',
  customerNo: '001',
  vatType: '小规模纳税人',
  industryCategory: '租赁和商务服务业-商务服务业',
  region: ['广东省', '佛山市', '高明区'],
  detailAddress: '佛山市高明区荷城街道中山路1号春天里花园119号商铺（住所申报）',
  customerManager: '阿静',
  serviceAdvisor: '杨亚丽',
  accountant: '阿静',
  taxAccountant: '阿静',
  chargePerson: ['罗会计'],
  invoicePerson: ['罗会计'],
  auditAccountant: ['叶会计', '李会计', '阿静'],
  otherServicePerson: ['冯祖云', '小谢', '卢会计', '杨亚丽', '罗会计']
};
let form = reactive({ ...formDefault });
const rules = {
  cityCode: [{ required: true, message: '请选择城市' }],
  taskName: [{ required: true, message: '请输入任务名称' }],
  outTaskId: [{ required: true, message: '请输入外部任务ID' }],
};

function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      SmartLoading.show();
      try {
        let res = await asApi.updateAs(form);
        message.success(res.message);
        emit('refresh');
        onClose();
      } catch (error) {
        smartSentry.captureError(error);
      } finally {
        SmartLoading.hide();
      }
    })
    .catch((error) => {
      console.log('error', error);
      message.error('参数验证错误，请仔细填写表单数据!');
    });
}



</script>

<style lang="less" scoped>
.form-width {
  width: 100% !important;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

:deep(.ant-card-body) {
  padding: 10px;
}
</style>
